<template>
	<view class="card_swiper_out" v-if="platformList.length > 1">
		<scroll-view :show-scrollbar="false" :enable-flex="true" :scroll-x="true" class="card_swiper">
			<block v-if="platformList.length <= 10">
				<view class="scroll">
					<view class="item" v-for="(item,index) in platformList" :key="index"
						@click.stop="goClassiFication(item)">
						<view class="image">
							<img class="item_img" :src="item.icon" />
						</view>
						<view class="title">
							<view class="text">{{item.name}}</view>
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="u-margin-bottom-26">
					<view class="scroll">
						<view class="item" v-for="(item,index) in platformList" v-if="index<8" :key="index"
							@click.stop="goClassiFication(item)">
							<view class="image">
								<img class="item_img" :src="item.icon" />
							</view>
							<view class="title">
								<view class="text">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="u-padding-bottom-26">
					<view class="scroll">
						<view class="item" v-for="(item,index) in platformList" v-if="index>8&&index<16" :key="index"
							@click.stop="goClassiFication(item)">
							<view class="image">
								<img class="item_img" :src="item.icon" />
							</view>
							<view class="title">
								<view class="text">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "zjcscrollnav",
		data() {
			return {

			}
		},
		props: {
			platformList: {
				type: Array,
				default () {
					return []
				},
			},
			type: {
				type: String,
				default: ''
			}
		},
		methods: {
			goClassiFication(item) {
				if (this.type == 'information') {
					uni.navigateTo({
						url: '/pages/information/list/index?id=' + item.id + '&type=' + this.type
					})
				}
				if (this.type == 'Busiess') {
					uni.navigateTo({
						url: '/pages/information/list/index?id=' + item.id + '&type=' + this.type
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	// 菜单
	.scroll_box {
		width: calc(100% - 48upx);
		height: 376upx;
		background: #ffffff;
		border-radius: 24upx;
		padding: 24upx;
	}

	.scroll_item {
		text-align: center;
		width: 96upx;
		color: #666666;
	}

	.scroll {
		display: flex;
	}


	.card_swiper_out {
		position: relative;
		padding-bottom: 20rpx;
		background: #FFFFFF;
		width: 100%;
		overflow-y: auto;
	}

	.card_swiper {
		white-space: nowrap;
		width: 100%;

	}

	.item {
		width: 190rpx;
		text-align: center;
		color: #767780;
		font-size: 24upx;
		margin-top: 20rpx;
	}

	.image {
		width: 190rpx;
	}

	.item_img {
		width: 90upx;
		height: 90upx;
		border-radius: 50%;
		margin-bottom: 10upx;
		font-size: 24upx;
	}

	.title {
		font-size: 26rpx;
		color: #000;
	}

	.text {
		width: 180rpx;
		margin: 0 auto;
		word-wrap: break-word;
		word-break: keep-all;
		white-space: normal;
	}

	.scroll_bar {
		background: rgba(242, 169, 64, 0.2);
		height: 8upx;
		border-radius: 5upx;
		position: relative;
		left: 50%;
		transform: translate(-50%, 0);
		z-index: 9;
		bottom: 0;
		transition: all 0.5s ease-in;
	}

	.left_line {
		content: ' ';
		width: 24upx;
		height: 8upx;
		background: red;
		border-radius: 5upx;
		position: absolute;
		top: 0;
	}
</style>
